import React from 'react'
import { deleteComment, deleteCommentReply } from '@/api'
import style from './index.module.scss'
import { showTime } from '@/utils/utils'
import { useHistory } from 'react-router-dom'
import { DeleteFilled } from '@ant-design/icons'
import { message, Modal, Popconfirm, Tooltip } from 'antd'

import CommentReply from '../commentReply'
export default ({
  comment,
  show,
  deleteCommentRender,
  deleteCommentRelyRender,
  offCommentModal,
  getBlogTitle,
}: React.PropsWithChildren<CommentModalStatusType>) => {
  const history = useHistory()
  if (comment === null) return null
  const toDetail = () => {
    history.push(`/detail/${comment.blogId}`)
  }
  const deleteCommentReplyFn = async () => {
    const { status, msg } = await deleteCommentReply({
      blogId: comment.blogId as number,
      commentId: comment.commentId,
    })
    if (!status) message.warning(msg)
    deleteCommentRelyRender()
    message.success('删除成功')
  }
  const deleteCommentFn = async () => {
    const { status, msg } = await deleteComment([comment.commentId])
    if (!status) message.warning(msg)
    deleteCommentRender()
    message.success('删除成功')
  }
  return (
    <Modal
      visible={show}
      onCancel={offCommentModal}
      title={
        <div className={style.title} onClick={toDetail}>
          {comment.blogTitle || getBlogTitle()}
        </div>
      }
      width="50%"
      footer={null}
    >
      <div className={style.content}>
        <div className={style.comment_title}>
          <div>{comment.name}：</div>
          <Popconfirm
            placement="topRight"
            title={'确定要删除这条评论吗?'}
            onConfirm={deleteCommentFn}
            okText="删除"
            cancelText="取消"
          >
            <Tooltip title="删除评论">
              <DeleteFilled className={style.icon} />
            </Tooltip>
          </Popconfirm>
        </div>
        <p>{comment.content}</p>
        <div className={style.time}>
          {`发布于 ${showTime(comment.creationTime)}`}
        </div>
      </div>
      {comment.reply ? (
        <div className={style.content}>
          <div className={`${style.comment_title} ${style.reply}`}>
            <div>回复：</div>
            <Popconfirm
              placement="topRight"
              title={'确定要删除这条回复吗?'}
              onConfirm={deleteCommentReplyFn}
              okText="删除"
              cancelText="取消"
            >
              <Tooltip title="删除回复">
                <DeleteFilled className={style.icon} />
              </Tooltip>
            </Popconfirm>
          </div>
          <p>{comment.reply}</p>
          {comment.replyTime && (
            <div className={style.time}>{showTime(comment.replyTime)}</div>
          )}
        </div>
      ) : (
        <CommentReply comment={comment} />
      )}
    </Modal>
  )
}
